<script setup lang="ts">
import { RouterView } from 'vue-router';
import SideBar from '@/layouts/SideBar/SideBar.vue';
import TopView from '@/layouts/TopView/TopView.vue';
import { useInitData } from './stores/initStore';
const initData = useInitData();
</script>

<template>
    <div class="app-container">
        <!-- 顶部导航栏，高度为50px -->
        <header class="top-bar">
            <!-- 这里放置顶部导航栏的内容 -->
            <TopView />
        </header>

        <!-- 主体内容区域 -->
        <div class="main-content">
            <!-- 左侧侧边栏，宽度为120px -->
            <aside class="sidebar" :style="{ width: initData.isCollapse ? '63px' : '160px' }">
                <!-- 这里放置侧边栏的内容 -->
                <SideBar />
            </aside>

            <!-- 主要内容区域 -->
            <div class="content">
                <!-- Vue Router 的视图容器 -->
                <RouterView />
            </div>
        </div>
    </div>
</template>

<style>
.app-container {
    display: flex;
    height: 100vh;

    /* 100% viewport height */
    flex-direction: column;
}

.top-bar {
    height: 50px;
    padding: 0 20px;
    background-color: #409eff;
}

.main-content {
    display: flex;
    flex: 1;

    /* 填充剩余空间 */
}

.sidebar {
    height: calc(100vh - 50px);
    background-color: #e0e0e0;
}

.content {
    height: calc(100vh - 50px);
    flex: 1;

    /* 填充剩余空间 */
    padding: 20px 20px 0;
    background-color: #e7f1fb;
    overflow-y: auto;

    /* 如果内容溢出则显示滚动条 */
}
</style>
